﻿@using OA.Core.Helper;
@{
    Layout = null;
    string jsonContent = JsonHelper.SerializeObject(Model);
    int customFormID = ViewBag.CustomFormID;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=8" />
    <link rel="stylesheet" type="text/css" href="~/Content/processtree/style/jsmind.css" />
    <title>流程树</title>
    <style type="text/css">
        .ul-context-menu {
            list-style: none;
            z-index: 99999999;
            padding: 5px 0;
            min-width: 80px;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .15);
            box-sizing: border-box;
            border-radius: 4px;
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

            .ul-context-menu .ui-context-menu-item {
                margin: 0;
                padding: 0;
            }

                .ul-context-menu .ui-context-menu-item a {
                    display: block;
                    padding: 0 10px;
                    color: #333;
                    white-space: nowrap;
                    text-decoration: none;
                }

                    .ul-context-menu .ui-context-menu-item a:hover {
                        text-decoration: none;
                        color: #262626;
                    }

                .ul-context-menu .ui-context-menu-item .icon {
                    width: 16px;
                    height: 16px;
                    margin-right: 8px;
                    vertical-align: sub;
                    border: 0;
                }

            .ul-context-menu li {
                text-align: center;
                border-bottom: 1px solid #ccc;
            }

                .ul-context-menu li.last {
                    border-bottom: none;
                }

            .ul-context-menu a {
                display: inline-block;
                height: 28px;
                line-height: 28px;
                text-decoration: none;
                text-align: center;
                color: #000;
            }
    </style>
</head>
<body>
    <div id="jsmind_container" style="width:100%;height:100%;"></div>
    <div style="display:none;" class="mymenu">
        <div style="width:120px;" class="ul-context-menu">
            <ul>
                <li>
                    <a href="javascript:addchild()">新增下级</a>
                </li>
                <li>
                    <a href="javascript:editPoint()">编辑节点</a>
                </li>
                <li class="last">
                    <a href="javascript:DeletePoint()">删除节点</a>
                </li>
            </ul>
        </div>
    </div>
    <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="~/Content/processtree/js/jsmind.js" type="text/javascript"></script>
    <script src="~/Content/processtree/js/jsmind.draggable.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/Content/layuiadmin/layui/layui.js"></script>
    <script type="text/javascript">
        var contextmenuContent = $(".mymenu").html();
        var _jm = null;
        function load_jsmind() {
            var mind = {
                "meta": {
                    "name": "demo",
                    "author": "hizzgdev@163.com",
                    "version": "0.2"
                },
                "format": "node_array",
                "data": @Html.Raw(ViewBag.Results)
            };
            var options = {
                container: 'jsmind_container',
                editable: true,
                theme: 'primary',
                mode: 'full'
            };
            _jm = jsMind.show(options, mind);
        }
        function get_selected_nodeid() {
            var selected_node = _jm.get_selected_node();
            if (selected_node) {
                return selected_node.id;
            }
            else {
                return null;
            }
        }
        function callmovedBack(src_node_id, target_node_id) {
            $.getJSON("/Admin/CustomForm/Remove", { CustomFormID : @ViewBag.CustomFormID, positionid: src_node_id, parentid: target_node_id }, function (result) {
                if (result.State == 200) {

                }
                else {
                    layer.msg(result.Message);
                }
            });
        }
        var currentNodeID = "0";
        load_jsmind();
        layui.use(['layer'], function () {
            var layer = layui.layer;
            $("jmnode").on('contextmenu', function (e) {
                ccurrentNodeID=get_selected_nodeid();
                e.preventDefault();
                layer.open({
                    title: false,
                    type: 1,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['120px', '98px'], //宽高
                    offset: [e.pageY, e.pageX],//位置
                    content: contextmenuContent
                });
            });
        });
    </script>
    <script type="text/javascript">

        function DeletePoint() {
            var nodeid = get_selected_nodeid();
            layer.confirm('您确认需要删除该节点吗？', {
                btn: ['我要删除', '不小心点错了'], title: '节点删除确认'
            }, function () {
                var url = "/Admin/CustomForm/Delete?CustomFormID=@ViewBag.CustomFormID&positionID=" + nodeid;
                $.getJSON(url, function (data) {
                    if (data.State === 200) {
                        _jm.remove_node(get_selected_nodeid());
                    }
                    else {
                        layer.msg(data.Message);
                    }
                });
            }, function () {

            });
        }

        function addchild() {
            var selected_id = get_selected_nodeid();
            layer.open({
                type: 2,
                title: '添加节点',
                shadeClose: true,
                shade: false,
                maxmin: false,
                area: ['1000px', '640px'],
                content: "/Admin/CustomForm/AddPoint?CustomFormID=@ViewBag.CustomFormID&parentID=" + selected_id
            });
        }

        function editPoint() {
            var selected_id = get_selected_nodeid();
            layer.open({
                type: 2,
                title: '编辑节点',
                shadeClose: true,
                shade: false,
                maxmin: false,
                area: ['1000px', '640px'],
                content: '/Admin/CustomForm/EditPoint?CustomFormID=@ViewBag.CustomFormID&positionID=' + selected_id
            });
        }
        function showData() {
            alert(JSON.stringify(_jm.get_data("node_array").data));
        }
    </script>
    <style type="text/css">
        .layui-layer-rim {
            border: 1px rgba(0, 0, 0, .15);
        }
    </style>
</body>
</html>
